<!doctype html>
<html class="no-js" lang="">

!DOCTYPE html>
html lang="en">
head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src=" .. /js/vue.js"></script>
/head>
body>
<h2>
  每个Vue 实例在被创建时都要经过一系列的初始化过程-例如,<br>
  需要设置数据监听、编译模板、将实例挂载到 DOM并在数据变化时更新 DOM等。<br>
  同时在这个过程中也会运行一些叫做生命周期钩子的函数,这给了用户在不同阶段添加自己
</h2>

<div id="app">
  <p>{{name}}</p>
  <button @click="update">update</button>
  <button @click="destroy">destroy</button>
</div>
<script>
  new Vue({
    el: "#app",
    data: {
      a: 1,
      name: "zs"

    }.methods:
  {
    update()
    {
// 改变 vue 实例的属性值
      this.name = Math.random() + " --- ";
    },
    destroy()
    {
// 销毁 vue 实例
      this.$destroy();
    }
  },
  beforeCreate() {
    console.log("创建vue实例之前");

    created()
    {
      console.log("vue实例创建成功");
      console.log(this.a);
    }
      /* created: () => console.log(this.a)*/

      beforeMount() {
        console.log("vue对象挂载之前");

        mounted() {
// 只执行一次页面加载完之后执行
          console.log("mounted 挂载完毕");
        },
        beforeUpdate()
        {
// 可执行多次
          console.log("data更新之前执行");
        },
          updated()
          {
// 可执行多次
            console.log("data更新之后执行");
            beforeDestroy()
          },
            {
//·只执行一次
              console.log("vue实例销毁之前执行");
            },
              destroyed(){
//·只执行一次
                console.log("vue实例销毁之后执行");

              }

            })

</script>
/body>

/html>
